<template>
  <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="审核状态" :label-col="{span: 4}" :wrapper-col="{span: 14, offset: 1}">
              <a-select v-model="queryParam.status" allowClear>
                <a-select-option value="0">审核中</a-select-option>
                <a-select-option value="1">审核不通过</a-select-option>
                <a-select-option value="2">审核通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      row-key="id"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
      :expandedRowKeys="expandedRowKeys"
      @expand="handleExpand"
      class="j-table-force-nowrap"
    >
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"/>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="handleDetail(record)">
          详情
        </a>
        <a-divider type="vertical"/>
        <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">
          <a>
            删除
          </a>
        </a-popconfirm>
      </span>

      <template #expandedRowRender>
        <a-table row-key="id" :columns="innerColumns" :data-source="innerData" :pagination="false">
          <span slot="action" slot-scope="text, record">
            <a @click="handleDetail(record)">
              详情
            </a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗?" @confirm="() =>handleDeleteChild(record.id,record.pid)">
              <a>
                删除
              </a>
            </a-popconfirm>
          </span>
        </a-table>
      </template>
    </a-table>

    <leaving-message-modal ref="modalForm" @ok="modalFormOk"/>

  </a-card>
</template>

<script>
import { TableListMixin } from '@/mixins/TableListMixin'
import { Modal } from 'ant-design-vue'
import LeavingMessageModal from './modules/LeavingMessageModal'
import AntsEllipsis from '@/components/ants/AntsEllipsis'
import { deleteAction, getAction, putAction } from '@/api/manage'

export default {
  name: 'LeavingMessage',
  components: {
    LeavingMessageModal,
    AntsEllipsis
  },
  mixins: [TableListMixin],
  data() {
    return {
      description: '技术栈',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '昵称',
          align: 'center',
          dataIndex: 'nickname'
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email'
        },
        {
          title: '留言内容',
          align: 'center',
          dataIndex: 'content',
          scopedSlots: { customRender: 'htmlSlot' }
        },
        {
          title: '留言时间',
          align: 'center',
          dataIndex: 'createDate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: '10%',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/leaveMessage/admimList',
        admimChidList: '/leaveMessage/admimChidList',
        delete: '/leaveMessage/delete',
        deleteChild: '/leaveMessage/deleteChild',
        deleteBatch: '/leaveMessage/deleteBatch',
        edit: '/leaveMessage/edit',
        getLeaveMessageCountByPid: '/leaveMessage/getLeaveMessageCountByPid'
      },
      // 子表数据
      innerData: [],
      // 子表表头
      innerColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '昵称',
          align: 'center',
          dataIndex: 'nickname'
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email'
        },
        {
          title: '回复内容',
          align: 'center',
          dataIndex: 'content',
          scopedSlots: { customRender: 'htmlSlot' }
        },
        {
          title: '回复时间',
          align: 'center',
          dataIndex: 'createDate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: '10%',
          scopedSlots: { customRender: 'action' }
        }
      ],
      expandedRowKeys: []
    }
  },
  methods: {
    handleCheck(record, status) {
      record.status = status
      putAction(this.url.edit, record).then(res => {
        if (res.success) {
          this.$message.success(res.message)
        }
      })
    },
    // 打开或关闭列表
    handleExpand(expanded, record) {
      // expanded = true：打开列表
      // expanded = false：关闭列表
      this.expandedRowKeys = []
      if (expanded) {
        this.expandedRowKeys.push(record.id)
        // 获取子列表数据（回复数据）
        getAction(this.url.admimChidList, { pid: record.id }).then(res => {
          if (res.success) {
            if (res.success) {
              this.innerData = res.result.records
              // this.pagination.total = res.result.total
            }
          }
        })
      }
    },
    // 删除评论
    handleDelete(id) {
      var that = this
      // 先判断有没有回复
      getAction(this.url.getLeaveMessageCountByPid, { pid: id }).then(res => {
        if (res.success) {
          if (res.result > 0) {
            // this.$message.warn('此条留言下有 ' + res.result.message + ' 条回复，确定要全部删除吗！')
            Modal.confirm({
              title: '删除提示',
              icon: '',
              content: '此条留言下有 ' + res.result + ' 条回复，确定要全部删除吗！',
              okText: '确认',
              cancelText: '取消',
              onOk() {
                that.handleDeleteOK(id)
              },
              onCancel() {
                that.$message.info('取消删除！')
              }
            })
          } else {
            that.handleDeleteOK(id)
          }
        }
      })
    },
    handleDeleteOK(id) {
      this.loading = true
      deleteAction(this.url.delete, { id: id }).then(res => {
        if (res.success) {
          this.loadData()
          this.loading = false
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleDeleteChild(id, pid) {
      this.loading = true
      deleteAction(this.url.deleteChild, { id: id }).then(res => {
        if (res.success) {
          this.handleExpand(true, { id: pid })
          this.loading = false
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
